<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-primary" align="center" style="font-size: 20px">
          <span>惠品优淘后台管理系统</span>
        </blockquote>
        <hr />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="6">
        <el-card class="update-log" style="border-radius: 10px;">
          <div slot="header" class="clearfix">
            <span>会员总数</span>
          </div>
          <div class="body" style="display: flex;justify-content: center;align-items: center; height: 100px">
            <span v-if="isAdmin == true"  @click="openSetRatio('会员总数比例','sys.allUserNumber')" style="font-size: 50px"><template>{{allUserNumber}}</template></span>
            <span v-else style="font-size: 50px"><template>{{allUserNumber}}</template></span>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="update-log" style="border-radius: 10px;">
          <div slot="header" class="clearfix">
            <span>昨日签到人数</span>
          </div>
          <div class="body" style="display: flex;justify-content: center;align-items: center; height: 100px">
            <span v-if="isAdmin == true"  @click="openSetRatio('昨日签到比例','sys.yesterdaySignInNumber')" style="font-size: 50px"><template>{{yesterdaySignInNumber}}</template></span>
            <span v-else style="font-size: 50px"><template>{{yesterdaySignInNumber}}</template></span>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="update-log" style="border-radius: 10px;">
          <div slot="header" class="clearfix">
            <span>昨日登录人数</span>
          </div>
          <div class="body" style="display: flex;justify-content: center;align-items: center; height: 100px">
            <span v-if="isAdmin == true"  @click="openSetRatio('昨日登录人数比例','sys.yesterdayLoginInNumber')" style="font-size: 50px"><template>{{yesterdayLoginInNumber}}</template></span>
            <span v-else style="font-size: 50px"><template>{{yesterdayLoginInNumber}}</template></span>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="update-log" style="border-radius: 10px;">
          <div slot="header" class="clearfix">
            <span>管理员数</span>
          </div>
          <div class="body" style="display: flex;justify-content: center;align-items: center; height: 100px">
            <span v-if="isAdmin == true"  @click="openSetRatio('管理员数比例','sys.allManagerNumber')" style="font-size: 50px"><template>{{allManagerNumber}}</template></span>
            <span v-else style="font-size: 50px"><template>{{allManagerNumber}}</template></span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :sm="24" :lg="16">
        <el-card class="update-log" style="border-radius: 10px;">
<!--          <div slot="header" class="clearfix">-->
<!--            <span>管理员数</span>-->
<!--          </div>-->
            <div ref="lineChart" style="height: 420px" />
          <div style="display: flex;justify-content: center;align-items: center;"><el-button @click="getLineChart(1)">近7日</el-button> <el-button @click="getLineChart(2)">近15日</el-button> <el-button @click="getLineChart(3)">近30日</el-button></div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="8">
        <el-card class="update-log" style="border-radius: 10px; height: 490px">
        <el-row :gutter="8">
          <el-col :sm="24" :lg="12">
            <el-card class="update-log" style="border-radius: 10px;">
              <div slot="header" class="clearfix">
                <span style="font-size: 15px">今日新增</span>
              </div>
              <div class="body" style="display: flex;justify-content: center;align-items: center; height: 40px; font-size: 20px">
                <span v-if="isAdmin == true"  @click="openSetRatio('今日新增比例','sys.todayAddUser')"><template>{{todayAddUser}}</template></span>
                <span v-else ><template>{{todayAddUser}}</template></span><br/>
              </div>
            </el-card>
          </el-col>
          <el-col :sm="24" :lg="12">
            <el-card class="update-log" style="border-radius: 10px;">
              <div slot="header" class="clearfix">
                <span style="font-size: 15px">今日登录</span>
              </div>
              <div class="body" style="display: flex;justify-content: center;align-items: center; height: 40px; font-size: 20px">
                <span v-if="isAdmin == true" @click="openSetRatio('今日登录比例','sys.todayLoginInNumber')"><template>{{todayLoginInNumber}}</template></span>
                <span v-else ><template>{{todayLoginInNumber}}</template></span><br/>
              </div>
            </el-card>
          </el-col>
        </el-row>
          <el-divider />
        <el-row :gutter="8">
          <el-col :sm="24" :lg="12">
            <el-card class="update-log" style="border-radius: 10px;">
              <div slot="header" class="clearfix">
                <span style="font-size: 15px">三日新增</span>
              </div>
              <div class="body" style="display: flex;justify-content: center;align-items: center; height: 40px; font-size: 20px">
                <span v-if="isAdmin == true" @click="openSetRatio('三日新增比例','sys.threeDayAddUser')" ><template>{{threeDayAddUser}}</template></span>
                <span v-else ><template>{{threeDayAddUser}}</template></span><br/>
              </div>
            </el-card>
          </el-col>
          <el-col :sm="24" :lg="12">
            <el-card class="update-log" style="border-radius: 10px;">
              <div slot="header" class="clearfix">
                <span style="font-size: 15px">七日新增</span>
              </div>
              <div class="body" style="display: flex;justify-content: center;align-items: center; height: 40px; font-size: 20px">
                <span v-if="isAdmin == true" @click="openSetRatio('七日新增比例','sys.sevenDayAddUser')" ><template>{{sevenDayAddUser}}</template></span>
                <span v-else ><template>{{sevenDayAddUser}}</template></span><br/>
              </div>
            </el-card>
          </el-col>
        </el-row>
          <el-divider />
        <el-row :gutter="8">
          <el-col :sm="24" :lg="24">
            <el-card class="update-log" style="border-radius: 10px;">
              <div slot="header" class="clearfix">
                <span style="font-size: 15px">七日活跃</span>
              </div>
              <div class="body" style="display: flex;justify-content: center;align-items: center; height: 40px; font-size: 20px">
                <span v-if="isAdmin == true" @click="openSetRatio('七日活跃比例','sys.sevenDayLoginIn')"><template>{{sevenDayLoginIn}}</template></span>
                <span v-else ><template>{{sevenDayLoginIn}}</template></span><br/>
              </div>
            </el-card>
          </el-col>
<!--          <el-col :sm="24" :lg="12">-->
<!--            <el-card class="update-log" style="border-radius: 10px;">-->
<!--              <span v-if="isAdmin == true" @click="openSetRatio('月活跃比例','sys.monthLoginIn')" style="font-size: 15px"><template>{{monthLoginIn}}</template></span>-->
<!--              <span v-else style="font-size: 15px"><template>{{monthLoginIn}}</template></span><br/>-->
<!--              <span style="font-size: 15px">月活跃</span>-->
<!--            </el-card>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--          <el-divider />-->
<!--        <el-row :gutter="8">-->
<!--          <el-col :sm="24" :lg="12">-->
<!--            <el-card class="update-log" style="border-radius: 10px;">-->
<!--              <span v-if="isAdmin == true" @click="openSetRatio('月下发比例','sys.monthIssueTaskNumber')" style="font-size: 15px"><template>{{monthIssueTaskNumber}}</template></span>-->
<!--              <span v-else style="font-size: 15px"><template>{{monthIssueTaskNumber}}</template></span><br/>-->
<!--              <span style="font-size: 15px">月下发</span>-->
<!--            </el-card>-->
<!--          </el-col>-->
<!--          <el-col :sm="24" :lg="12">-->
<!--            <el-card class="update-log" style="border-radius: 10px;">-->
<!--              <span v-if="isAdmin == true" @click="openSetRatio('月完成比例','sys.monthFinishNumber')" style="font-size: 15px"><template>{{monthFinishNumber}}</template></span>-->
<!--              <span v-else style="font-size: 15px"><template>{{monthFinishNumber}}</template></span><br/>-->
<!--              <span style="font-size: 15px">月完成</span>-->
<!--            </el-card>-->
<!--          </el-col>-->
        </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>待审核</span>
          </div>
          <div class="body" style="display: flex;justify-content: center;align-items: center; height: 220px">
            <span  v-if="isAdmin == true" @click="openSetRatio('待审核比例','sys.waitAuditNumber')" style="font-size: 50px"><template>{{waitAuditNumber}}</template></span>
            <span v-else style="font-size: 50px"><template>{{waitAuditNumber}}</template></span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>今日完成数</span>
          </div>
          <div class="body" style="display: flex;justify-content: center;align-items: center; height: 220px">
            <span  v-if="isAdmin == true" @click="openSetRatio('今日完成数比例','sys.finishNumber')" style="font-size: 50px"><template>{{finishNumber}}</template></span>
            <span v-else style="font-size: 50px"><template>{{finishNumber}}</template></span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card>
          <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item hidden="hidden"  prop="configName">
          <el-input v-model="form.configName" />
        </el-form-item>
        <el-form-item hidden="hidden" prop="configKey">
          <el-input v-model="form.configKey" />
        </el-form-item>
        <el-row>
          <el-col :span="18">
            <el-form-item label="比例" style="font-size: 30px" prop="configValue">
              <el-input type="number" min="0" v-model="form.configValue" placeholder="请输入比例" @input="handleInput" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <span  style="font-size: 30px">%</span>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userNumber ,yesterdayNumber,taskNumber,getLineChart,getUserStatistics,isAdmin,getRatio,setRatio} from "@/api/system/index";
import { getServer } from "@/api/monitor/server";
import * as echarts from "echarts";
import {getSignInRule} from "@/api/system/signInRule";
export default {
  name: "Index",
  data() {
    return {
      allUserNumber: null,
      allManagerNumber: null,
      yesterdaySignInNumber: null,
      yesterdayLoginInNumber: null,
      waitAuditNumber: null,
      finishNumber: null,
      todayLoginInNumber: null,
      todayAddUser: null,
      threeDayAddUser: null,
      sevenDayAddUser: null,
      sevenDayLoginIn: null,
      monthLoginIn: null,
      monthFinishNumber: null,
      monthIssueTaskNumber: null,
      // 统计信息
      lineChart: null,
      server: [],
      isAdmin:false,
      // 弹出层标题
      title: "",
      // 表单参数
      form: {},
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {
      },
      // 版本号
      version: "3.8.8"
    };
  },
  created() {
    this.userNumber();
    this.yesterdayNumber();
    this.taskNumber();
    this.getList();
    this.getLineChart();
    this.getUserStatistics();
    this.isAdminUser();
  },
  methods: {
    isAdminUser() {
      isAdmin().then(response => {
        if(response.data === "1"){
          this.isAdmin = true;
        }
      });
    },
    handleInput(value) {
      // 将输入值转换为数字
      const number = Number(value);
      // 如果输入的是负数，则重置为空字符串
      if (isNaN(number) || number < 0) {
        this.form.configValue = '';
      } else {
        // 否则更新输入值
        this.form.configValue =  String(Math.floor(number));
      }
    },
    // 表单重置
    reset() {
      this.form = {
        configName:null,
        configKey:null,
        configValue:null,
      };
      this.resetForm("form");
    },
    openSetRatio(configName,configKey){
      this.reset();
      this.open = true;
      this.title = "设置比例";
      this.form.configName = configName;
      this.form.configKey = configKey;
      getRatio(configKey).then(response => {
        if(response.msg != "比例为空"){
          this.form.configValue = response.data;
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        setRatio(this.form).then(response => {
          if(response.code == 200){
            this.$modal.msgSuccess("设置成功");
            this.open = false;
          }
        });
      });
    },
    userNumber() {
      userNumber().then(response => {
        this.allUserNumber = response.data.allUserNumber;
        this.allManagerNumber = response.data.allManagerNumber;
      });
    },
    taskNumber() {
      taskNumber().then(response => {
        this.waitAuditNumber = response.data.waitAuditNumber;
        this.finishNumber = response.data.finishNumber;
      });
    },
    yesterdayNumber() {
      yesterdayNumber().then(response => {
        this.yesterdaySignInNumber = response.data.yesterdaySignInNumber;
        this.yesterdayLoginInNumber = response.data.yesterdayLoginInNumber;
      });
    },
    getUserStatistics() {
      getUserStatistics().then(response => {
          this.todayLoginInNumber= response.data.todayLoginInNumber
          this.todayAddUser= response.data.todayAddUser
          this.threeDayAddUser= response.data.threeDayAddUser
          this.sevenDayAddUser= response.data.sevenDayAddUser
          this.sevenDayLoginIn= response.data.sevenDayLoginIn
          this.monthLoginIn= response.data.monthLoginIn
          this.monthFinishNumber= response.data.monthFinishNumber
          this.monthIssueTaskNumber= response.data.monthIssueTaskNumber
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getList() {
      getServer().then(response => {
        this.server = response.data;
      });
    },
    getLineChart(type) {
      if(type == undefined){
        type = 1;
      }
      getLineChart(type).then(response =>{
        let xAxisData = []
        let seriesData = []

        let keys = Object.entries(response.data).sort((a, b) => {
          // 将键（日期字符串）转换为日期对象进行比较
          return new Date(a[0]) - new Date(b[0]);
        });
        keys.forEach(key => {
          xAxisData.push(key[0]);
          seriesData.push(key[1]);
        });

        this.lineChart = echarts.init(this.$refs.lineChart);
        this.lineChart.setOption({
          title:{
            show:true,
            text:'注册人数',
            left: 'center'
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}"
          },
          xAxis: {
            data: xAxisData
          },
          yAxis: {},
          series: [{
            name: '注册人数',
            type: 'line',
            data: seriesData
          }]
        });
      })
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

